Obtener los datos a través de esta API https://restcountries.com/v3.1/name/portugal . Para un par de campos, es decir, bandera, nombre, moneda obteniendo [objeto objeto]
XMLHTTPRequest const request = new XMLHttpRequest(); // Here we need URL for AJAX calls //request is an object // Type of Request - GET request.open('GET','https://restcountries.com/v3.1/name/portugal'); // open the request //we have to send this request to the url to fetch the data request.send(); //We need request call back on the load. callback function request.addEventListener('load',function() { // converting json file to normal text. const [data] = JSON.parse(this.responseText); console.log(data); const html=` <article class="country"> <img class="country__img" src="${data.flags}"/> console.log(data.flags); <div class="country__data"> <h3 class="country__name">${data.name}</h3> <h4 class="country__region">${data.region}</h4> <p class="country__row"><span>👫</span>${data.population}</p> <p class="country__row"><span>🗣️</span>${data.languages}</p> <p class="country__row"><span>💰</span>${data.currencies}</p> </div> </article> `;Para marcar la obtención de la imagen No se puede OBTENER /[objeto%20Objeto] otros campos también [objeto%20Objeto].
¿Tengo que usar JSON.stringify?
Cualquier ayuda apreciada.
Gracias, Ajeet
Creo que necesitas hacer esto:
const data = JSON.parse(this.responseText); console.log(data); console.log(data[0].population); etces decir, elimine los corchetes de const [datos] y obtenga el índice 0
La propiedad data.flags que está utilizando para el atributo src es un objeto en sí mismo, no una simple URL, ya que contiene URL para formatos png y svg .
Intente pasar data.flags.png o data.flags.svg para el atributo src y debería funcionar.
Debe usar la notación adecuada para obtener valores de JSON. Puede consultar el siguiente código para obtener más información.
request.addEventListener('load', function () { // converting json file to normal text. const [data] = JSON.parse(this.responseText); console.log(data); const lang = Object.values(data.languages).join(','); const currencies = Object.values(data.currencies).map((c) => c.name).join(','); const html = ` <article class="country"> <img class="country__img" src="${data.flags.png}"/> <div class="country__data"> <h3 class="country__name">${data.name.common}</h3> <h4 class="country__region">${data.region}</h4> <p class="country__row"><span>👫</span>${data.population}</p> <p class="country__row"><span>🗣️</span>${lang}</p> <p class="country__row"><span>💰</span>${currencies}</p> </div> </article> `; const divEl = document.createElement('div'); divEl.innerHTML = html; document.body.appendChild(divEl); console.log(html); });